<template>
  <el-scrollbar height="100%">
    <kdcrud :options="options" :model="model"></kdcrud>
    <DialogAddSee class="addsee" ref="addSee" :dialogData="state.dialogData" />
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import { options, getMessage } from "./options";
import model from "./model";
import DialogAddSee from "@/components/DialogAddSee.vue";
import { $getPlantingPlan } from "@/utils/api";
import store from "@/store/index";
const state = reactive({
  tableData: [], // 数据列表
  total: 0, // 总条数
  pageIndex: 1, // 当前页
  pageSize: 10, // 分页大小
  start: "", // 开始日期
  end: "", // 结束日期
  TraceabilityCode: "", // 追溯码
  CropVarieties: "", // 作物品种
  currentChange: null, // 分页切换方法
  facilities_id: "", // 设施id
  park_id: "", // 园区id
  currentData: "",
  facilities: "",
  dialogData: {},
});
const addSee = ref(null);
const getMess = async () => {
  const res = await $getPlantingPlan(model);
  state.currentData = res.results.data;
  console.log(state.currentData);
};
getMess();
// ----------- 查看详细信息 -----------
options.options.optionsArr[7].handleClick = (e) => {
  console.log(111111, state.currentData[e]);

  state.dialogData = Object.assign(state.currentData[e], {
    facilities: state.facilities,
  });
  addSee.value.open();
};
watch(
  computed(() => store.state.facilities),
  (e) => {
    model.facilities_id = e;
    getMessage();
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-form) {
  display: flex;
}
:deep(.el-form-item__content) {
  margin-left: 10px !important;
}
:deep(.el-pagination) {
  display: flex;
  justify-content: center;
}
</style>
